<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>与你共享一颗行星是我的荣幸</title>

    <!-- 引用在线arcgis api -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.16/"></script>

    <!-- <link rel="stylesheet" href="http://localhost/4.17/esri/themes/light/main.css">
    <script src="http://localhost/4.17/init.js"></script> -->

    <!-- 引入jquery -->
    <script src="js/jquery-2.0.3.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/main.css">
    <!-- 引入js文件 -->
    <!-- <script src="map/maptool.js"></script> -->

    <!-- 引入layui框架 -->
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <script src="js/layui/layui.js"></script>

    <script>
        require([
            "esri/Map",
            "esri/Basemap",
            "esri/views/MapView",
            "esri/views/SceneView",
            "esri/geometry/Extent",
            "esri/geometry/SpatialReference",
            "esri/geometry/Point",
            "esri/geometry/Polyline",
            "esri/geometry/Polygon",
            "esri/Graphic",
            "esri/widgets/Sketch",
            "esri/Color",
            "esri/layers/support/TileInfo",
            "esri/layers/WebTileLayer",
            "esri/views/layers/LayerView",
            "esri/layers/TileLayer",
            "esri/layers/MapImageLayer",
            "esri/layers/FeatureLayer",
            "esri/layers/GraphicsLayer",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/tasks/support/BufferParameters",
            "esri/tasks/GeometryService",
            "esri/core/urlUtils",
            "esri/tasks/FindTask",
            "esri/tasks/support/FindParameters",
            "esri/tasks/QueryTask",
            "esri/tasks/support/Query",
            "esri/tasks/IdentifyTask",
            "dojo/dom",
            "dojo/on",
            "dojo/domReady!"
        ], function(
            Map,
            Basemap,
            MapView,
            SceneView,
            Extent,
            SpatialReference,
            Point,
            Polyline,
            Polygon,
            Graphic,
            Sketch,
            Color,
            TileInfo,
            WebTileLayer,
            LayerView,
            TileLayer,
            MapImageLayer,
            FeatureLayer,
            GraphicsLayer,
            SimpleMarkerSymbol,
            SimpleFillSymbol,
            SimpleLineSymbol,
            BufferParameters,
            GeometryService,
            urlUtils,
            FindTask,
            FindParameters,
            QueryTask,
            Query,
            IdentifyTask,
            dom,
            on) {
            //创建一个地图Map实例
            var tiledLayer = new WebTileLayer({
                urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=840f605d15aac8d62e45be2904bafb90",
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
            });
            var basemap = new Basemap({
                baseLayers: [tiledLayer],
                // baseLayers: [
                //     new MapImageLayer({
                //         url: "http://www.fqghj.net:8022/arcgis/rest/services/CXGHBZ/YDGHPH/MapServer"
                //     })
                // ],
                title: "basemap",
                id: "basemap" //topo、terrain、streets-relief-vector、streets-night-vector、streets-navigation-vector、
                    //streets、satellite、osm、oceans、national-geographic、hybrid、gray、dark-gray
            });

            var layer = new MapImageLayer({
                //url: "http://localhost:6080/arcgis/rest/services/fuqing/MapServer"
                url: "http://localhost:6080/arcgis/rest/services/Qingdao1/MapServer"
            });
            var map = new Map({ //属性：allLayers、ground、layers
                basemap: basemap,
                layers: [layer]
            });
            //创建一个MapView实例（用于2D查看）并引用该地图实例
            //为了使地图在DOM中对用户可见，必须创建一个MapView并至少引用两个对象：一个Map实例和一个DOM元素。分别在map和container属性中设置。
            var view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 12,
                //center: [119.391242, 25.680595] // longitude, latitude
                center: [120.362562, 36.093745] // longitude, latitude 青岛市
            });
            const sketch = new Sketch({
                layer: layer,
                view: view,
                // graphic will be selected as soon as it is created
                creationMode: "update"
            });
            view.ui.add(sketch, "top-right");

            var sel = true;
            $(".layertool").click(function() {
                // $(".layertool").css({
                //     "background-color": "#98bf21",
                // });

                if (sel) {
                    $(".layerlist").css({
                        "display": "block"
                    });
                    sel = false;
                } else {
                    $(".layerlist").css({
                        "display": "none"
                    });
                    sel = true;
                }
            });
            $(".selectokimg").click(function() {
                var sellyr = false;
                if ($(this).attr("src") == "photo/lyrselectok.png") {
                    $(this).attr("src", "photo/lyrselectcancel.png");
                } else {
                    $(this).attr("src", "photo/lyrselectok.png");
                    sellyr = true;
                }
                // var class1=$(this).attr("class");
                // switch(class1){
                //     case "":
                //     if(){
                //         .visible=true;
                //     }
                //     else{
                //         .visible=false;
                //     }
                // }
            });
            $(".drawtool").click(function() {
                var sellyr = false;
                if ($(this).attr("src") == "photo/lyrselectok.png") {
                    $(this).attr("src", "photo/lyrselectcancel.png");
                } else {
                    $(this).attr("src", "photo/lyrselectok.png");
                    sellyr = true;
                }
            });

            view.on("click", function(event) {
                console.log(event.mapPoint.x);
                console.log(event.mapPoint.y);
                // var value = a.lng + "," + a.lat;
                var value = event.mapPoint.x + "," + event.mapPoint.y;
                //$(".coorddisplay").value = "dd";
                $(".coorddisplay")[0].setAttribute('value', value);
                // document.getElementsByTagName("INPUT")[0].setAttribute("type","button"); 
                //document.getElementsByClassName("coorddisplay")[0].setAttribute('data-clipboard-text', value);
                // $(".coorddisplay").attr("value") = "dd";
            });

            // function coordll() {
            //     console.log("ddd");
            // };

            // "esri/widgets/CoordinateConversion"  CoordinateConversion
            // var ccWidget = new CoordinateConversion({
            //     view: view
            // });

            // // Adds widget in the bottom left corner of the view
            // view.ui.add(ccWidget, "bottom-left");

            // 工具箱hover事件
            // $(".drawtool").hover(
            //     function() {
            //         $(this).children().slideDown(100);
            //     },
            //     function() {
            //         $(this).children().slideUp(100);
            //     }
            // )

            $(".searchBtn").click(function() {
                // var layer = layui.layer;
                // var $ = layui.jquery;
                // layer.open({
                //     title: '在线调试',
                //     content: '$(".searchDiv")'
                // });

                layui.use(['layer', 'form'], function() {
                    var layer = layui.layer,
                        form = layui.form;
                    //layer.msg('$(".searchDiv")');
                    layer.open({
                        title: '在线调试',
                        content: $(".searchDiv")
                    });
                });
            });

            $(".searchImg").click(function() {
                SearchByName();
            });

            //搜索方法
            function SearchByName() {
                var inName = $(".searchTxt").val();
                console.log(inName);
                var findTask = new FindTask({
                    url: "http://localhost:6080/arcgis/rest/services/xygy/MapServer"
                });
                var findParams = new FindParameters({
                    layerIds: 0,
                    //要搜索的层的字段的名称。
                    searchFields: name,
                    outSpatialReference: {
                        wkid: 4547
                    },
                    //在图层和搜索字段属性中指定的跨层和字段搜索的文本。
                    searchText: $(".searchTxt").val(),
                    returnGeometry: true
                });
                findTask.execute(findParams).then(function(results) {
                    console.log(results);
                    var length = results.results.length;
                    console.log(length);
                    var list = $("<li class=search_li>");
                    for (var i = 0; i < 10; i++) {
                        list.append(results.results[i].value);
                    }
                    $(".resultList").append(list); //椿树
                });
            };

            // $.ajax({
            //     type: "get",
            //     url: xml,
            //     data: {
            //         username: "wang",
            //         age: 60
            //     },
            //     dataType: "json",
            //     contentType: "application/json;charset=utf-8",
            //     cache: false,
            //     async: false,
            //     // timeout:2000,  异步可以使用
            //     success: function(da) {
            //         console.log(da);
            //     },
            //     error: function(xhr, type) {
            //         console.log("请求失败!!")
            //     }
            // });
        });
    </script>

</head>

<body>
    <!-- <form id="form1" runat="server">
        
    </form> -->

    <div>
        <div class="menubar">
            <p>这是一首简单的小情歌</p>
        </div>
        <div class="toolbar">
            <div class="layertool"><img src="photo/lyr.png" /></div>
            <div class="drawtool"><img src="photo/drawgeo.png" /></div>
            <button class="searchBtn">搜索</button>
        </div>
    </div>
    <!-- 放置地图 -->
    <div id="viewDiv">
        <!-- 图层div -->
        <div class="layerlist" style="display: none">
            <div class="layertitle">图层列表</div>
            <div class="layerbody">
                <div class="selectok">
                    <img src="photo/lyrselectok.png" class="selectokimg" style="float: left" />
                    <p>这是一个图层</p>
                </div>
                <!-- <div class="selectcancel"><img src="photo/lyrselectcancel.png" /></div> -->
                <!-- <p>这是一个</p> -->
            </div>
        </div>


        <div class="coordinate">
            <i class="iconfont">&#xe68a;</i>
            <p class="coordtext">当前坐标:</p>
            <input class="coorddisplay" type="text" value="">
        </div>

        <!-- 图层搜索框 -->
        <div class="searchDiv" style="display: none;">
            <div class="searchBox">
                <input class="searchTxt" type="text" placeholder="请输入道路、地名">
                <img class="searchImg" src="photo/search.png" alt="搜索">
            </div>
            <div class="searchResult">
                <ul class="resultType"></ul>
                <div class="resultList"></div>
            </div>
        </div>
    </div>

</body>

</html>